@charset "utf-8";
@import "reset";
$zcm:40;
@function r($px) {
    @return $px/(2*$zcm) * 1rem;
}

* {
    margin: 0;
    padding: 0;
    list-style: none;
}

html,
body {
    width: 100%;
    height: 100%;
}

.web {
    width: 100%;
    height: 100%;
}

header {
    width: 100%;
    height: r(74);
    position: absolute;
    top: 0;
    a {
        height: 100%;
        left: r(28);
        position: absolute;
        color: #000000;
        img{
            width: r(26);
            height: r(38);
            position: relative;
            vertical-align: top;
            top: r(16);
        }
    }
    p {
        font-size: r(28);
        text-align: center;
        line-height: r(74);
    }
}

section {
    width: 100%;
    background: white;
    position: absolute;
    top: r(74);
    bottom: r(150);
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
    .line {
        width: 100%;
        height: r(1);
        border-top: 1px solid #A7A7A7;
        background: #A7A7A7;
    }
    article {
        width: r(592);
        height: r(760);
        background: #e5e5e5;
        margin: 0 auto;
        margin-top: r(56);
        overflow: hidden;
        border-radius: r(25);
        box-shadow: r(0) r(13) r(13) #c8c8c8;
        table {
            margin: 0 auto;
            margin-top: r(21);
            line-height: r(40);
            img {
                width: r(118);
                height: r(96);
                margin-right: r(29);
            }
            tr:nth-child(1) {
                td {
                    font-size: r(18);
                }
            }
            tr:nth-child(2) {
                td {
                    font-size: r(20);
                }
            }
        }
        .line1 {
            width: 100%;
            height: r(1);
            border: 1px solid #898989;
            background: #898989;
            margin-top: r(13);
            margin-bottom: r(22);
        }
        .explain {
            width: r(374);
            margin: 0 auto;
            font-size: r(16);
            line-height: r(40);
        }
        .container {
            width: r(360);
            height: r(360);
            background: white;
            position: relative;
            margin: 0 auto;
            border-radius: r(15);
            margin-top: r(18);
            .container_img {
                width: r(330);
                height: r(330);
                position: absolute;
                left: r(18);
                right: r(18);
                top: r(18);
                bottom: r(18);
                margin: auto;
                img {
                    width: 100%;
                    height: 100%;
                }
            }
        }
        .article_bottom {
            width: r(360);
            margin: 0 auto;
            font-size: r(18);
            text-align: center;
            color: #000000;
            margin-top: r(23);
        }
    }
    .line_bottom {
        width: 100%;
        height: r(1);
        background: #333333;
        position: absolute;
        top: r(880);
    }
    .p {
        font-size: r(16);
        text-align: center;
        width: r(315);
        background: #FFFFFF;
        padding: 0;
        margin: 0;
        margin: 0 auto;
        margin-top: r(45);
        position: relative;
    }
}

footer {
    width: 100%;
    height: r(150);
    position: absolute;
    bottom: 0;
    ul {
        width: r(495);
        margin: 0 auto;
        height: r(46);
        position: relative;
        top: r(-25);
        li {
            float: left;
            width: 33.3%;
            img {
                width: r(53);
                height: r(46);
            }
            span {
                font-size: r(16);
                vertical-align: middle;
            }
        }
    }
}